<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">
			<div class="title-wra">
				<div id="title1">
					<span class="title-text">{{ title }}</span>
				</div>
				<div id="title2">
					<span style="cursor: pointer;" @click="moreleInfo()">更多 >></span>
				</div>
			</div>
			<div class="scrol-cls">
				<div class="listhead listhead1">
					<span>井号</span>
					<span>队号</span>
					<span>工艺</span>
					<span>深度</span>
					<span>井斜</span>
					<span>绞车速度</span>
					<span>电缆速度</span>
					<span>井口张力</span>
					<span>缆头张力</span>
				</div>
				<vue-seamless-scroll :data="tableData" class="seamless-warp listnav listnav1" :class-option="optionSetting">
					<ul class="item">
						<li v-for="(item, i) in tableData" :key="i">
							<span><b>{{ item.wellName }}</b></span>
							<span><b>{{ item.crewName }}</b></span>
							<span><b>{{ item.craft }}</b></span>
							<span><b>{{ item.depth }}</b></span>
							<span><b>{{ item.dev}}</b></span>
							<span><b>{{ item.uspeed }}</b></span>
							<span><b>{{ item.cspeed }}</b></span>
							<span><b>{{ item.uten }}</b></span>
							<span><b>{{ item.cten }}</b></span>
						</li>
					</ul>
				</vue-seamless-scroll>
			</div>

		</div>
	</div>
</template>

<script>
	import {
		getRealTime
	} from "@/api/index";
	const Base64 = require('js-base64').Base64;
	export default {
		name: "RealtimeData",
		data() {
			return {
				tableData: [],
				websock: null,
				getData: [],
			};
		},

		computed: {
			optionSetting() {
				return {
					step: 0.4, // 数值越大速度滚动越快
					limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
					hoverStop: true, // 是否开启鼠标悬停stop
					direction: 1, // 0向下 1向上 2向左 3向右
					openWatch: true, // 开启数据实时监控刷新dom
					singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
					waitTime: 100, // 单步运动停止的时间(默认值1000ms)
				};
			},
		},

		destroyed() {
			this.websock && this.websock.close(); //离开路由之后断开websocket连接
		},
		mounted() {
			this.getRealTimeData();

			this.initWebSocket();
			// this.infinitScroll();

			// const table = this.$refs.table;
			// // 拿到表格中承载数据的div元素
			// const divData = table.bodyWrapper;
			// clearInterval(this.timers);
			// // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
			// this.timers = setInterval(() => {
			//   // 元素自增距离顶部1像素
			//   divData.scrollTop += 1;
			//   // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
			//   if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) {
			//     // 重置table距离顶部距离
			//     divData.scrollTop = 0;
			//   }
			// }, 60); // 滚动速度
		},
		methods: {
			async getRealTimeData() {
				let RealTimeData2 = [];
				const {
					data: res
				} = await getRealTime();
				let RealTimeData1 = res.data;
				for (let i = 0; i < RealTimeData1.list.length; i++) {
					// console.log(res.data[i]);
					RealTimeData2.push({
						'crewName': RealTimeData1.list[i].crewName,
						'wellName': RealTimeData1.list[i].wellName,
						'craft': RealTimeData1.list[i].craft,
						'depth': RealTimeData1.list[i].depth + 'm',
						'dev': RealTimeData1.list[i].dev + '°',
						'uspeed': RealTimeData1.list[i].uspeed + 'm/h',
						'cspeed': RealTimeData1.list[i].cspeed + 'm/h',
						'uten': RealTimeData1.list[i].uten + 'N',
						'cten': RealTimeData1.list[i].cten + 'N'
					});
				};
				this.tableData = RealTimeData2;
				// console.log(this.tableData);


			},

			initWebSocket() {
				//ws://121.5.149.41:8089/webSocket
				//初始化weosocket
				const wsuri = "ws://10.28.63.127:8089/webSocket";
				// process.env.NODE_ENV === "production"
				//   ? "wss://api.dingdangcode.com/ddc-base/ws/run"
				//   : process.env.NODE_ENV === "degelopment"
				//   ? "wss://api.dingdangcode.cn/ddc-base/ws/run"
				//   : "wss://api.dingdangcode.cn/ddc-base/ws/run";
				// this.websock = new WebSocket(wsuri)
				if ("WebSocket" in window) {
					// && !this.websock
					//连接WebSocket节点
					this.websock = new WebSocket(wsuri);
				} else {
					console.log("Not support websocket");
				}
				console.log(
					66666666,
					this.websock,
					"WebSocket" in window && !this.websock,
					"WebSocket" in window,
					!this.websock
				);
				if (this.websock) {
					// console.log("websock有值");
					this.websock.onmessage = this.websocketonmessage;
					this.websock.onopen = this.websocketonopen;
					this.websock.onerror = this.websocketonerror;
					this.websock.onclose = this.websocketclose;
				}
			},
			// websocketonopen() {
			// 	//连接建立之后执行send方法发送数据
			// 	console.log(1010101010101);

			// 	const actions = {
			// 		messageType: 1,
			// 		langTypeCode: 1,
			// 		userCode: Base64.encode(this.aceFilesData.ojcode[0].fileContent)
			// 		// 'I2luY2x1ZGUgPGlvc3RyZWFtPgogCnVzaW5nIG5hbWVzcGFjZSBzdGQ7CiAKaW50IG1haW4oICkKewogICBjaGFyIG5hbWVbNTBdOwogICBjaGFyIGFnZVs1MF07CiAKICAgY291dCA8PCAi6K+36L6T5YWl5oKo55qE5ZCN56ew77yaICI7CiAgIGNpbiA+PiBuYW1lOwogICBjb3V0IDw8ICLmgqjnmoTlkI3np7DmmK/vvJogIiA8PCBuYW1lIDw8IGVuZGw7CgogIGNvdXQgPDwgIuivt+i+k+WFpeaCqOeahOW5tOm+hO+8miAiOwogICBjaW4gPj4gYWdlOwogICBjb3V0IDw8ICLmgqjnmoTlubTpvoTmmK/vvJogIiA8PCBhZ2UgPDwgZW5kbDsKIAp9'
			// 	};
			// 	this.websocketsend(JSON.stringify(actions));
			// },
			websocketonerror() {
				//连接建立失败重连
				// this.initWebSocket()
			},
			websocketonmessage(e) {
				//数据接收
				let redata = JSON.parse(e.data);
				// console.log(2222, e);
				// console.log(3333, redata);
				var newArr = [];
				newArr.push({
					'crewName': redata[0].teamId,
					'wellName': redata[0].wellId,
					'craft': redata[0].craft,
					'depth': redata[0].depthFirst + 'm',
					'dev': redata[0].wellAngle + '°',
					'uspeed': redata[0].speed + 'm/h',
					'cspeed': redata[0].speedSecond + 'm/h',
					'uten': redata[0].tensionFirst + 'N',
					'cten': redata[0].tensionSecond + 'N'
				});
				//把一个数组合并到原来的数组里
				this.tableData = this.tableData.concat(newArr);
				// console.log(this.tableData);
				
				if (redata.messageType == 2) {
					console.log(33333);
					console.log("this.textJudge1111", this.textJudge);
					this.handleInput(redata.output);
				} else if (redata.messageType == 4) {
					// this.isShowMatplotlib = true
					// this.inputMatplotlib = redata.output
					this.isShowInputText = true;
					if (redata.output) {
						this.textJudge.push(redata.output + "\n");
					}
					console.log("this.textJudge22222", this.textJudge);
				} else if (redata.messageType == 6) {
					if (redata.output) {
						this.textJudge.push(redata.output + "\n");
					}
					this.websock.onclose = this.websocketclose;
					this.isShowInputText = false;
					this.isShowRunBtn = true;
				}
			},
			websocketsend(Data) {
				//数据发送
				this.websock.send(Data);
			},
			websocketclose(e) {
				//关闭
				console.log("断开连接", e);
				this.isShowInputText = false;
				this.isShowRunBtn = true;
			},
			// infinitScroll() {
			// 	// 拿到表格挂载后的真实DOM
			// 	const table = this.$refs.table;
			// 	// 拿到表格中承载数据的div元素
			// 	const divData = table.bodyWrapper;
			// 	divData.onmouseover = function() {
			// 		clearInterval(t);
			// 	}; //鼠标移入，停止滚动
			// 	divData.onmouseout = function() {
			// 		start();
			// 	}; //鼠标移出，继续滚动

			// 	// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
			// 	let t;

			// 	function start() {
			// 		// 数据少于表格高度停止滚动
			// 		if (divData.clientHeight >= divData.scrollHeight) {
			// 			return;
			// 		}
			// 		t = setInterval(() => {
			// 			// 元素自增距离顶部1像素
			// 			divData.scrollTop += 1;
			// 			// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
			// 			if (
			// 				divData.clientHeight + divData.scrollTop ==
			// 				divData.scrollHeight
			// 			) {
			// 				// 重置table距离顶部距离
			// 				divData.scrollTop = 0;
			// 			}
			// 		}, 100);
			// 	}
			// 	start();
			// },

			// tableRowClassName({
			// 	row,
			// 	rowIndex
			// }) {
			// 	if (rowIndex % 2 == 0) {
			// 		return "warning-row";
			// 	} else if (rowIndex % 2 == 1) {
			// 		return "success-row";
			// 	}
			// 	return "";
			// },

			moreleInfo() {
				this.$router.replace("/RealTimeHome");
			},

			// indexMethod(index) {
			// 	return index + 1;
			// }
		},
		props: {
			title: String
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.tabel_Background {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		margin-top: 1.2%;
		height: 35%;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		// border: 1px solid rgb(12, 50, 107);
		background-image: url("../../assets/bg2@2x.png");
		// background-image: url('./../../../assets/mobile/pre-share-page@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	.title-wra {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 12%;
	}

	#title1 {
		width: 23%; //3.02rem;
		height: 100%;
		min-width: 2.96rem;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 5%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}

	#title2 {
		font-size: 110%;
		color: #04c2ed;
	}

	.scrol-cls {
		overflow: hidden;
		height: 80%;
		margin-top: 2%;
	}

	.listhead {
		position: relative;
		margin: 0 auto;
		// height: 10px;
		display: flex;
		width: 100%; //95%;
		height: 15%; //30px; //20%;
		justify-content: space-between;
		z-index: 1;
	}

	.listnav {
		height: 80%;
		overflow: hidden;
	}

	.listnav ul li {
		height: 50px; //20%; //30px; //80%;
		display: flex;
		justify-content: space-between;
		// border: 1px solid red;
	}

	.listhead span,
	.listnav li span {
		width: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.listhead1 span,
	.listnav1 li span {
		// border-bottom: 1px solid #1a7396;
	}

	.listnav ul li span {
		height: 50px; //22px;
	}

	.listnav ul li:nth-child(even) {
		background: #0d2a48; // #1f437e;
	}

	.listhead1 span {
		background-color: #0a3169;
		font-size: 2px;
		color: #07daff;
		font-weight: bold;
		// line-height: 22px;
		// height: 22px;
	}

	.listhead2 span {
		font-size: 2px;
		color: #0a3169;
		/* border-bottom: 1px solid #0c2854; */
		font-weight: bold;
	}
</style>
